/**
 * search 传参方式，取参
 *  props.location.search   查询字符串参数 key1=value1&key2=value2
 *
 *    1. 自行实现一个函数getQuery 对 props.location.search 做处理
 *    2. 直接使用现成的 URLSearchParams 构造器来处理 查询字符串
 *       const obj = new URLSearchParams(查询字符串)
 *          obj 是一个 Map 的数据格式，需要通过 .get(参数名) 获取对应的参数值。
 */

/**
 * 实现一个函数，传递类似于 ?id=1&name=苹果 的参数，返回一个对象
 *    {
 *       id: 1,
 *       name: '苹果'
 *    }
 */
function getQuery(str: string) {
  // 0. 定义一个结果
  const result: any = {};
  // 1. 处理一下 ? 号
  str = str.indexOf("?") === 0 ? str.substring(1) : str;
  // 2. 做 split 分割
  const arr = str.split("&"); // ['id=1', 'name=苹果']
  // 3. 对 arr 做循环
  arr.forEach((tmp) => {
    // tmp  'id=1'  'name=苹果'
    // 对 tmp 再做 split =
    const tmpArr = tmp.split("="); // ['id', 1]  ['name', '苹果']
    // 追加到 result
    //    tmpArr[1] 可能是做了 encodeURIComponent() 编码的。需要使用 decodeURIComponent() 做个解码
    result[tmpArr[0]] = decodeURIComponent(tmpArr[1]);
  });
  // 4. 返回 result
  return result;
}

function InfoOne(props: any) {
  //  1. 自行实现一个 getQuery 来处理
  // const search = props.location.search;
  // const searchParams = getQuery(search);
  // console.log("searchParams", searchParams);
  // return (
  //   <div>
  //     <h4>详情</h4>
  //     <p>ID: {searchParams.id}</p>
  //     <p>Name: {searchParams.name}</p>
  //   </div>
  // );

  // 2. 使用 URLSearchParams 构造函数来处理
  const searchParams = new URLSearchParams(props.location.search);
  return (
    <div>
      <h4>详情</h4>
      <p>ID: {searchParams.get("id")}</p>
      <p>Name: {searchParams.get("name")}</p>
    </div>
  );
}

export default InfoOne;
